<!doctype html>
<html lang="zh-CN">
<head><title>测试数据</title></head>
{//<script src="https://cdn.static.runoob.com/libs/jquery/1.8.0/jquery.min.js"></script>}
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body class="container" style="font-size:10px">
<button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i>增加</button>

<button type="button" class="btn btn-success" ><i class="glyphicon glyphicon-ok"></i>保存</button>

    <div class="row" style="text-align: center;">

            <form id="myForm" role="form">


                <table  class="table table-hover table-bordered">
                    <tr  class="info">
                        <th style="text-align: center;">ID</th>
                        <th style="text-align: center;">编号</th>
                        <th style="text-align: center;">名称</th>
                        <th style="text-align: center;">厂家</th>
                        <th style="text-align: center;">规格</th>
                        <th style="text-align: center;">单位</th>
                        <th style="text-align: center;">单价</th>
                        <th style="text-align: center;">数量</th>
                        <th style="text-align: center;">功能</th>
                    </tr>


                </table>

            </form>

    </div>





<script type="text/javascript">
    var id = 1;
    var number = {$max};
    $(".btn-primary").click(function(){
        if($("table tr").hasClass("addtr")){
            alert("先完成操作！！！");
        }else{
            $("table tr:last").after(' <tr class="addtr"><td><input type="text" disabled="disabled" name="id[]" value=' + id + ' /></td>'+
                '<td><input type="text" disabled="disabled" name="number[]" value='+ number +' /></td>'+
                '<td><input type="text" name="name[]" value="" /></td>' +
                '<td><input type="text" name="dimension[]" value="" /></td>' +
                '<td><input type="text" name="spec[]" value="" /></td>' +
                '<td><input type="text" name="unit[]" value="" /></td>' +
                '<td><input type="text" name="price[]" value="" /></td>' +
                '<td><input type="text" name="quantity[]" value="" /></td>' +
                '<td> <a href="javascript:;" class="btn save btn-default btn-xs">保存</a>  <a href="javascript:;" class="btn off btn-default btn-xs">取消</a> </td>'+
                ' </tr>');
        }
        id ++;
        number ++;

    })


//    var Larr = new Array();
//    var Narr = new Array();

    //保存
    $(document).on("click",".save",function(){

        var sid =$(this).parent().parent().find('input[name="id[]"]').val();
        var snumber =$('input[name="number[]"]').val();
        var sname =$('input[name="name[]"]').val();
        var sdimension =$('input[name="dimension[]"]').val();
        var sspec =$('input[name="spec[]"]').val();
        var sunit =$('input[name="unit[]"]').val();
        var sprice =$('input[name="price[]"]').val();
        var squantity =$('input[name="quantity[]"]').val();
//        Larr.push(sid,snumber,sname,sdimension,sspec,sunit,sprice,squantity);
//        Narr.push(chen);
//        alert(Narr);
        var n="";
        n+='<td>'+sid+'</td>';
        n+='<td>'+snumber+'</td>';
        n+='<td>'+sname+'</td>';
        n+='<td>'+sdimension+'</td>';
        n+='<td>'+sspec+'</td>';
        n+='<td>'+sunit+'</td>';
        n+='<td>'+sprice+'</td>';
        n+='<td>'+squantity+'</td>';
        n+='<td>';
        n+='<a href="javascript:;" class="btn edit btn-default btn-xs"><span class="icon-edit"></span>修改</a>';
        n+='</td>';
        $(this).parent().parent().removeClass("addtr");
        $(this).parent().parent().html(n);
    })

    //修改
    $(document).on("click",".edit",function(){
        if($("table tr").hasClass("addtr")){
            alert("先完成操作！！！");
        }else{
            var eid =$(this).parent().parent().find('td').eq(0).text();
            var enumber =$(this).parent().parent().find('td').eq(1).text();
            var ename =$(this).parent().parent().find('td').eq(2).text();
            var edimension =$(this).parent().parent().find('td').eq(3).text();
            var espec =$(this).parent().parent().find('td').eq(4).text();
            var eunit =$(this).parent().parent().find('td').eq(5).text();
            var eprice =$(this).parent().parent().find('td').eq(6).text();
            var equantity =$(this).parent().parent().find('td').eq(7).text();

            var n="";
            n+='<td><input type="text" disabled="disabled" name="id[]" value="'+eid+'" /></td>';
            n+='<td><input type="text" disabled="disabled" name="number[]" value="'+enumber+'" /></td>';
            n+='<td><input type="text" name="name[]" value="'+ename+'" /></td>';
            n+='<td><input type="text" name="dimension[]" value="'+edimension+'" /></td>';
            n+='<td><input type="text" name="spec[]" value="'+espec+'" /></td>';
            n+='<td><input type="text" name="unit[]" value="'+eunit+'" /></td>';
            n+='<td><input type="text" name="price[]" value="'+eprice+'" /></td>';
            n+='<td><input type="text" name="quantity[]" value="'+equantity+'" /></td>';
            n+='<td>';
            n+='<a href="javascript:;" class="btn save btn-default btn-xs">保存</a>';
            n+='<a href="javascript:;" class="btn off btn-default btn-xs">取消</a>';
            n+='</td>';
            $(this).parent().parent().addClass("addtr");
            $(this).parent().parent().html(n);
        }

    })

    $(document).on("click",".off",function(){

        window.location.reload();
    })
</script>

<script src="__PUBLIC__/static/js/form.js"></script>
<script type="text/javascript">
    $(function () {
        $(".btn-success").click(function () {

            var options = {
                url: "{:url('index/text/add')}",
                type: "post",
                restForm: true,
                success: function (data) {
//                    if(data.code !=1 ){
//                        $('#err_msg').show().html("<span style='color:red'>"+data.msg+"</span>");
//                        return;
//
//                    }else {$(function() {
//                        window.location.href=data.data;
//                    })}

                },
            };
            $("#myForm").ajaxForm(options);
        });
    });

//    $(function(){
//        $(".btn-success").click(function(){
//            alert($("#myForm").serialize());
//        });
//    });
</script>

</body>
</html>